import { updateTopic } from '@/services/api/api-cues-topic';
import { SettingOutlined } from '@ant-design/icons';
import { DrawerForm, ProFormDateTimeRangePicker, ProFormRadio } from '@ant-design/pro-form';
import { Button, message } from 'antd';
import moment from 'moment';
import React, { useEffect, useState } from 'react';

interface DetailsTopicEditProps {
  topicId: string | undefined;
  createdTime: string | undefined;
  deadline: string | undefined;
  run: number | undefined;
  onRefurbish: () => void;
}

const DetailsTopicEdit: React.FC<DetailsTopicEditProps> = ({
  topicId,
  createdTime,
  deadline,
  run,
  onRefurbish,
}) => {
  const [deadlineDisabled, setDeadlineDisabledState] = useState<boolean>(run == 2 || run == 3);
  const [runExtra, setRunExtraState] = useState<string>('');

  /**
   * 加载权限树请求网络
   */
  useEffect(() => {
    console.log('===========', run, deadlineDisabled, run == 2 || run == 3);
  }, []);

  return (
    <DrawerForm
      key="edit_drawer_form"
      title="修改配置信息"
      drawerProps={{
        destroyOnClose: true,
      }}
      trigger={
        <Button key="button_share_account" icon={<SettingOutlined />}>
          修改配置信息
        </Button>
      }
      initialValues={{
        deadline: [createdTime, deadline],
        run,
      }}
      onVisibleChange={(visible: boolean) => {}}
      onValuesChange={(values) => {
        console.log('===========', values);
        if (values.run == 1) {
          setDeadlineDisabledState(false);
          setRunExtraState('请确认选题计划截止时间');
        } else if (values.run == 2 || values.run == 3) {
          setDeadlineDisabledState(true);
          setRunExtraState('提交后，截止时间为提交时间');
        }
      }}
      onFinish={async (values) => {
        let deadline = '';
        if (values.deadline !== undefined && values.deadline.length === 2) {
          deadline = values.deadline[1];
        }

        const response = await updateTopic({
          ...values,
          id: topicId,
          deadline,
        });
        if (response.code === 0) {
          message.success('提交成功');
          onRefurbish();
          return true;
        } else {
          return false;
        }
      }}
    >
      <ProFormDateTimeRangePicker
        disabled={deadlineDisabled}
        rules={[{ required: true, message: '这是必填项' }]}
        width="xl"
        name="deadline"
        label="选题计划截止时间"
        tooltip="到达截止时候后，系统关闭单位报送渠道"
        fieldProps={{
          defaultValue: [moment(createdTime), moment(deadline)],
          disabled: [true, deadlineDisabled],
          ranges: {
            后5天: [moment(), moment().add(5, 'days')],
            后10天: [moment(), moment().add(10, 'days')],
            后15天: [moment(), moment().add(15, 'days')],
            后20天: [moment(), moment().add(20, 'days')],
          },
          format: 'YYYY-MM-DD HH:mm:ss',
        }}
      />
      <ProFormRadio.Group
        name="run"
        label="状态"
        options={[
          {
            label: '进行',
            value: 1,
          },
          {
            label: '结束',
            value: 2,
          },
          {
            label: '暂停',
            value: 3,
          },
        ]}
        extra={runExtra}
      />
    </DrawerForm>
  );
};
export default DetailsTopicEdit;
